@use "theme/globals" as *;

:host {
    --core-h5p-placeholder-bg-color: var(--gray-300);
    --core-h5p-placeholder-text-color: var(--ion-text-color);

    .core-h5p-placeholder {
        position: relative;
        width: 100%;
        height: 230px;
        background: url('/assets/img/icons/h5p.svg') center top 25px / 100px auto no-repeat var(--core-h5p-placeholder-bg-color);
        color: var(--core-h5p-placeholder-text-color);

        .icon:not([color="success"]) {
            color: var(--core-h5p-placeholder-text-color);
        }

        .core-h5p-placeholder-play-button, .core-h5p-placeholder-spinner {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .core-h5p-placeholder-play-button {
            font-size: #{dynamic-font(30px)};
            min-height: 50px;
        }

        .core-h5p-placeholder-download-container {
            position: absolute;
            top: 0;
            right: 0;

            ion-spinner {
                margin-right: 0.75em;
            }

            core-download-refresh > ion-icon {
                margin: 0.4rem 0.2rem;
                padding: 0 0.5em;
                line-height: .67;
            }
        }

        ion-spinner circle {
            stroke: var(--core-h5p-placeholder-text-color);
        }
    }
}
